<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 用 canvas 让图片绕自己转 -->
    <canvas width="600px" height="400px">
      <img src="./06.png" alt="" style="display: none" />
    </canvas>
    <script>
      const canvas = document.querySelector('canvas')
      var res = canvas.getContext('2d')
      var img = document.querySelector('img')
      // dranwImage() 向画布上绘制图像、画布或视频
      img.onload = function () {
        res.drawImage(img, 0, 0, 400, 400)
      }
      window.onload = function () {
        // 旋转角度
        var rotateval = 0
        // 定时器
        setInterval(function () {
          let canva = document.querySelector('canvas')
          rotateval++
          canva.style.transform = 'rotate(' + rotateval + 'deg)'
          canva.style.transition = '1000 linear'
        }, 50)
      }
    </script>
  </body>
</html>
